
@contentMaxWidth: 800px;
@contentMinMarginX: 30px;
@tocMinWidth: 200px;
@tocMarginLeft: @contentMinMarginX;

// Screen sizes:
// - small:  Content takes full width, TOC is hidden
// - medium: If TOC is enabled: Content is left, TOC is right
//           If TOC is disabled: Same as large
// - large:  Content is centered, TOC is right
//
// NOTE: We need a variable using brackets here, otherwise less won't calculate the width
//       See: https://github.com/less/less.js/issues/1903
@screen-size-small-max:  (@contentMaxWidth + 2 * @contentMinMarginX);
@screen-size-medium-content-shrinks-max: (@screen-size-small-max + @tocMinWidth);       // content is dynamic, TOC has fixed width
@screen-size-medium-content-full-min: (@screen-size-medium-content-shrinks-max + 1px);  // content has fixed width, TOC is dynamic
@screen-size-medium-min: (@screen-size-small-max + 1px);
@screen-size-medium-max: (@contentMaxWidth + 2 * @tocMinWidth);

.main-column {
  width: @contentMaxWidth;
  margin: 0 auto;

  .mode-edit & {
    width: auto;
    margin: 0 @contentMinMarginX;
  }

  .is-toc-enabled & {
    @media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-content-shrinks-max) {
      width: auto;
      margin-left: @contentMinMarginX;
      margin-right: @contentMinMarginX + @tocMinWidth;
    }
    @media (min-width: @screen-size-medium-content-full-min) and (max-width: @screen-size-medium-max) {
      width: @contentMaxWidth;
      margin: 0 @contentMinMarginX;
    }
  }
  @media (max-width: @screen-size-small-max) {
    width: auto;
    margin: 0 @contentMinMarginX;
  }
}

.breadcrumbs {
  position: fixed;
  right: 0;
  top: 0;
  width: 100%;

  .mode-edit & {
    width: 50%;
  }

  #button-menu {
    display: none;

    .is-toc-enabled & {
      @media (max-width: @screen-size-small-max) {
        display: block;
      }
    }
  }
}

.toc-wrapper {
  position: fixed;
  top: 0;
  left: 50%;
  right: 0;
  height: 100%;
  padding: 70px 10px 0 0;
  margin-left: @contentMaxWidth / 2 + @tocMarginLeft;
  background-color: rgba(255, 255, 255, 0.9);

  .mode-edit & {
    display: none;
  }

  @media (min-width: @screen-size-medium-min) and (max-width: @screen-size-medium-content-shrinks-max) {
    width: @tocMinWidth;
    left: auto;
  }
  @media (min-width: @screen-size-medium-content-full-min) and (max-width: @screen-size-medium-max) {
    left: @contentMinMarginX + @contentMaxWidth + @tocMarginLeft;
    margin-left: 0;
  }
  @media (max-width: @screen-size-small-max) {
    transform: translateX(100%);
    left: auto;
    width: @tocMinWidth;
    bottom: 0;
    transition: all 300ms ease-in-out;

    .is-toc-visible & {
      transform: translateX(0);
    }
  }
}

#content {
  padding: 30px 0 150px;
}

footer {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
}
